import { createUseStyles } from "react-jss";

export default createUseStyles({
  headerTab: {
    paddingTop: "16px",
    display: "flex",
    flexDirection: "column",
    fontSize: (props: { fontSize: number }) => props.fontSize,
  },
  tab: {
    height: "24px",
    lineHeight: "24px",
    display: "inline-block",
    textAlign: "center",
    background: "white",
    cursor: "pointer",
    borderRadius: "0",
    padding: "0 10px",
    "&:hover": {
      color: "#037AFF",
    },
  },
  first: {
    borderTopLeftRadius: "4px",
    borderBottomLeftRadius: "4px",
  },
  last: {
    borderTopRightRadius: "4px",
    borderBottomRightRadius: "4px",
  },
  active: {
    background: "#037AFF",
    color: "white",
    "&:hover": {
      color: "white",
    },
  },
  tabs: {
    padding: "0 16px",
  },
  tabsPanel: {
    display: "inline-block",
    boxShadow: "0px 0px 4px 0px #D0D7DF",
    flexShrink: 0,
  },
  children: {
    // height: "100%",
    flexGrow: 1,
  },
});
